<template>
    <view class="page">
        <view class="content">
            <u-form labelPosition="top"
                    labelWidth="300"
                    :model="form"
                    ref="uForm">
                <u-form-item label="价格范围(必填)" prop="price_section" borderBottom>
                    <view class="u-flex-row u-flex-wrap">
                        <view class="u-page__tag-item" v-for="(item, index) in price" :key="index">
                            <u-tag :text="item.text" :plain="!item.checked" type="warning" :name="index" @click="priceClick"></u-tag>
                        </view>
                    </view>
                    <u-row>
                        <text style="margin: 10rpx">自定义</text>
                        <view style="width: 150rpx"><u--input placeholder="最低价" border="surround" v-model="minPrice"></u--input></view>
                        <text style="margin: 10rpx"> - </text>
                        <view style="width: 150rpx"><u--input placeholder="最高价" border="surround" v-model="maxPrice"></u--input></view>
                        <text style="margin: 10rpx">元</text>
                    </u-row>
                </u-form-item>

                <u-form-item label="居住范围(必填)" prop="price_section" borderBottom @click="locationOpen">
                    <view style="margin: 10rpx 0">
                        <u--input v-model="d_name" disabled disabledColor="#f3f4f6" border="none" fontSize="18" placeholder="你想住哪儿？"></u--input>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                    <u-picker ref="locationPicker" :show="locationStatus" :columns="locationColumns" keyName="label" @confirm="locationConfirm" @change="locationChangeHandler" @cancel="locationCancel"></u-picker>
                </u-form-item>

                <u-form-item label="出租类型(必填)" prop="price_section" borderBottom>
                    <view class="u-flex-row u-flex-wrap">
                        <view class="u-page__tag-item2" v-for="(item, index) in rent" :key="index">
                            <u-tag :text="item.text" :plain="!item.checked" type="warning" :name="index" @click="rentClick"></u-tag>
                        </view>
                    </view>
                </u-form-item>

                <u-form-item label="房屋户型" prop="price_section" borderBottom>
                    <view class="u-flex-row u-flex-wrap">
                        <view class="u-page__tag-item2" v-for="(item, index) in room" :key="index">
                            <u-tag :text="item.text" :plain="!item.checked" type="warning" :name="index" @click="roomClick"></u-tag>
                        </view>
                    </view>
                </u-form-item>

                <u-form-item label="特殊要求" prop="price_section" borderBottom>
                    <view class="u-flex-row u-flex-wrap">
                        <view class="u-page__tag-item2" v-for="(item, index) in special" :key="index">
                            <u-tag :text="item.text" :plain="!item.checked" type="warning" :name="index" @click="specialClick"></u-tag>
                        </view>
                    </view>
                </u-form-item>

                <u-form-item label="入住时间" prop="price_section" borderBottom @click="entryOpen">
                    <view style="margin: 10rpx 0">
                        <u--input v-model="entry_time" disabled disabledColor="#f3f4f6" border="none" fontSize="18" placeholder="预计入住时间呢？"></u--input>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                    <u-picker :show="entryStatus" :columns="entryColumns" @confirm="entryConfirm" @cancel="entryCancel"></u-picker>
                </u-form-item>
                <u-gap height="10"></u-gap>
                <u-form-item>
                    <view style="margin: 0 auto">
                        <u-radio-group v-model="checked">
                            <u-radio activeColor="#f1a532" shape="square" :name="true" label="符合要求的房东主动来联系"></u-radio>
                        </u-radio-group>
                    </view>
                </u-form-item>
            </u-form>

            <u-gap height="20"></u-gap>
            <u-row>
                <u-button type="warning" text="发布" @click="save"></u-button>
            </u-row>
        </view>

        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script>
    export default {
        name: 'help',
        data() {
            return {
                minPrice:'',
                maxPrice:'',
                entryStatus: false,
                entryColumns: [
                    ['一周内', '两周内', '三周内', '一月内', '一月后']
                ],
                locationStatus: false,
                locationColumns: [
                    ['区域', '附近', '地铁'], [], []
                ],
                locationColumnData: [
                    [],[]
                ],
                price: [
                    {text: '0-500', checked: false},
                    {text: '500-600', checked: false},
                    {text: '800-1000', checked: false},
                    {text: '1000-1500', checked: false},
                    {text: '1500-2000', checked: false},
                    {text: '2000以上', checked: false}
                ],
                rent:[
                    {text: '整租', checked: false},
                    {text: '合租', checked: false},
                ],
                room:[
                    {text: '一室户', checked: false},
                    {text: '两室户', checked: false},
                    {text: '三室户', checked: false},
                    {text: '四室户', checked: false},
                    {text: '更大户型', checked: false},
                ],
                special:[
                    {text: '付一', checked: false},
                    {text: '免中介费', checked: false},
                    {text: '独卫', checked: false},
                    {text: '近地铁', checked: false},
                    {text: '朝南', checked: false},
                ],
                checked: false,
                form:{
                    price_section: '',
                    d_name: '',
                    longitude: '',
                    latitude: '',
                    lease_type: '',
                    entry_time: '',
                    room_types: '',
                    claim: ''
                },
            }
        },
        onLoad(){
            let u_id = uni.getStorageSync('u_id');
            let userInfo = uni.getStorageSync('userInfo');
            if (u_id && userInfo.mobile) {
                this.getLocationData();
            }else{
                uni.navigateTo({url:'/pages/user/my/login'});
            }
        },
        methods:{
            getLocationData(){
                uni.$u.http.get('/api.php/index/area_list', {params: {type: 10}}).then(res => {
                    for (let i = 0; i < res.length; i++) {
                        this.locationColumns[1].push(res[i].AREA_NAME);
                        this.locationColumnData[i] = [];
                        for (let j = 0; j < res[i].street_data.length; j++) {
                            this.locationColumnData[i].push(res[i].street_data[j].STREET_NAME);
                            if (i === 0) {
                                this.locationColumns[2].push(res[i].street_data[j].STREET_NAME);
                            }
                        }
                    }
                });
            },
            priceClick(name){
                this.price.map((item, index) => {
                    item.checked = index === name;
                });
                this.form.price_section = this.price[name].text;
            },
            rentClick(name){
                this.rent.map((item, index) => {
                    item.checked = index === name;
                });
                this.form.lease_type = name + 1;
            },
            roomClick(name){
                this.room[name].checked = !this.room[name].checked;
                let  array = [];
                for (let i = 0; i < this.room.length; i++) {
                    if (this.room[i].checked){
                        array.push(this.room[i].text);
                    }
                }
                this.form.room_types = array.join();
            },
            specialClick(name){
                this.special[name].checked = !this.special[name].checked;
                let  array = [];
                for (let i = 0; i < this.special.length; i++) {
                    if (this.special[i].checked){
                        array.push(this.special[i].text);
                    }
                }
                this.form.claim = array.join();
            },
            entryConfirm(e) {
                this.form.entry_time = e.value[0];
                this.entryCancel();
            },
            entryCancel() {
                this.entryStatus = false;
                uni.hideKeyboard();
            },
            entryOpen() {
                this.entryStatus = true;
            },

            locationConfirm(e) {
                this.form.d_name = e.value[2];
                this.locationCancel();
            },
            locationCancel() {
                this.locationStatus = false;
                uni.hideKeyboard();
            },
            locationOpen() {
                this.locationStatus = true;
            },
            locationChangeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
                    // 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.locationPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                // if (columnIndex === 0) {
                //     // picker为选择器this实例，变化第二列对应的选项
                //     picker.setColumnValues(1, this.locationColumnData[index])
                // }
                if (columnIndex === 1) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(2, this.locationColumnData[index])
                }
            },
            save(){
                let data = uni.$u.deepClone(this.form);
                data.u_id = uni.getStorageSync('u_id');

                if (this.minPrice && this.maxPrice) {
                    data.price_section = this.minPrice + '-' + this.maxPrice;
                }

                uni.$u.http.post('/api.php/UserClinet/look_house', data).then(res => {
                    uni.showToast({
                        title: '发布成功', //提示文字
                        duration: 3000, //显示时长
                        icon: "success", //图标，支持"success"、"loading"
                    });
                    uni.navigateBack({delta:1});
                });
            },
        }
    }
</script>

<style scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }
    .content{
        padding: 20rpx;
    }
    .u-page__tag-item {
        width: 180rpx;
        margin: 20rpx;
    }

    .u-page__tag-item2 {
        margin: 20rpx 30rpx;
    }
</style>
